<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" 
	xmlns:of="http://omnifaces.org/functions"
	xmlns:pe="http://primefaces.org/ui/extensions"
	template="/WEB-INF/templates/template.xhtml">
	
<ui:define name="headIncludes">
	<f:event listener="#{ordemServicoBean.initializeForm(param.numOS)}" type="preRenderView"/>
</ui:define>
	
	<ui:define name="pageName">Cadastrar Ordem de Serviço</ui:define>
	
	<ui:define name="buttons">
		<p:commandButton value="Salvar" style="height:28px;" action="#{ordemServicoBean.save}" update="@this, messageFormOS" icon="ui-icon-disk"/>
		<p:commandButton value="Voltar" style="height:28px;" action="#{ordemServicoBean.changeToList}" process="@this" icon="ui-icon-arrowreturnthick-1-w"/>
	</ui:define>
	
	<ui:define name="content">
	<p:panel>
		<div>
			<p:messages id="messageFormOS" closable="true" autoUpdate="true"/>
			
			<h:panelGrid columns="4" style="padding:5px;" id="panel1">
				<h:outputText value="Número da OS" />
				<h:outputText value="Cliente *" />
				<h:outputText value="" />
				<h:outputText value="Data de emissão *" />
				
				<p:inputText style="width:100px;" value="#{ordemServicoBean.currentOrdemServico.numOs}" disabled="true"/>
				<p:autoComplete id="inputCliente" var="cliente" value="#{ordemServicoBean.currentOrdemServico.cliente}"
						itemLabel="#{cliente.nome}" itemValue="#{cliente}" size="50" 
						converter="clienteConverter" completeMethod="#{ordemServicoBean.getClienteByQuery}"
						disabled="#{(ordemServicoBean.contasReceber.size() > 0 or !ordemSevicoBean.agendamentoBean.ordemServico)}"/>
				<p:commandButton icon="ui-icon-search" style="height:24px;" immediate="true" actionListener="#{ordemServicoBean.openDialogListCliente}"
					disabled="#{(ordemServicoBean.contasReceber.size() > 0)}" title="Selecionar cliente"/>	
				<p:calendar value="#{ordemServicoBean.currentOrdemServico.data}" navigator="true" id="inputDataEmissao"
						readonlyInput="true" showButtonPanel="true" locale="pt_BR" pattern="dd/MM/yyyy" mindate="#{ordemServicoBean.minDate}" disabled="#{(ordemServicoBean.contasReceber.size() > 0)}"/>
			</h:panelGrid>
			
			<h:panelGrid columns="9" style="padding:5px;" id="panelServico">
				<h:outputText value="Funcionário"/>
				<h:outputText value=""/>
				<h:outputText value=""/>
				<h:outputText value="Serviço"/>	
				<h:outputText value=""/>		
				<h:outputText value="Valor unitário"/>
				<h:outputText value=""/>
				<h:outputText value="Quantidade"/>	
				<h:outputText value=""/>
				
				<p:autoComplete id="inputFuncionario" var="funcionario" value="#{ordemServicoBean.itemServico.funcionario}"
					itemLabel="#{funcionario.nome}" itemValue="#{funcionario}" size="50"
					converter="funcionarioConverter" completeMethod="#{ordemServicoBean.getFuncionarioByQuery}"
					onkeypress="if (event.keyCode == 13) { event.preventDefault(); $('#btAdicionarItem').click(); }">
					<p:ajax event="blur" process="@this inputFuncionario" listener="#{ordemServicoBean.handleInputFuncionarioChange}"/>
					<p:ajax event="itemSelect" update="inputFuncionario"/>
				</p:autoComplete>
				
				<p:commandButton icon="ui-icon-close" style="height:25px; margin-left:-33px;" immediate="true" actionListener="#{ordemServicoBean.removeFuncionario}"
					disabled="#{(ordemServicoBean.contasReceber.size() > 0)}" title="Remover funcionário"/>	
					
				<p:commandButton icon="ui-icon-search" style="height:24px;" immediate="true" actionListener="#{ordemServicoBean.openDialogListFuncionario}"
					disabled="#{(ordemServicoBean.contasReceber.size() > 0)}" title="Selecionar funcionário"/>		
								
				<p:autoComplete id="inputServico" var="servico" value="#{ordemServicoBean.itemServico.servico}"
					itemLabel="#{servico.descricao}" itemValue="#{servico}" size="50"
					converter="servicoConverter" completeMethod="#{ordemServicoBean.getServicoByQuery}"
					onkeypress="if (event.keyCode == 13) { event.preventDefault(); $('#btAdicionarItem').click(); }">
					<p:ajax event="blur" process="@this inputServico inputValor" listener="#{ordemServicoBean.handleInputServicoChange}"/>
					<p:ajax event="itemSelect" update="@this inputServico inputValor" />
				</p:autoComplete>
				
				<p:commandButton icon="ui-icon-close" style="height:25px; margin-left:-33px;" immediate="true" actionListener="#{ordemServicoBean.removeServico}"
					disabled="#{(ordemServicoBean.contasReceber.size() > 0)}" title="Remover serviço"/>	
				
				<pe:inputNumber style="width:100px;" value="#{ordemServicoBean.itemServico.servico.valorTotal}" id="inputValor" decimalSeparator="," decimalPlaces="2"  thousandSeparator="." disabled="true"/>
				
				<p:commandButton icon="ui-icon-search" style="height:24px;" immediate="true" actionListener="#{ordemServicoBean.openDialogListServico}"
					disabled="#{(ordemServicoBean.contasReceber.size() > 0)}" title="Selecionar serviço"/>
					
				<p:inputText style="width:100px;" id="inputQuantidade" value="#{ordemServicoBean.itemServico.quantidade}"
					disabled="#{(ordemServicoBean.contasReceber.size() > 0)}" maxlength="5">
					<pe:keyFilter regEx="/[\d]/" />
				</p:inputText>
				
				<p:commandButton style="height:24px;" icon="ui-icon-plus" id="btAdicionarItem" actionListener="#{ordemServicoBean.addServicoOS}" disabled="#{(ordemServicoBean.contasReceber.size() > 0)}" title="Adicionar item"/>
			</h:panelGrid>
							
			<div style="padding-top:10px; margin-left: 10px;">
				<p:dataTable var="servicoOS" rowIndexVar="rowIndex" 
					emptyMessage="Não há registros"
					value="#{ordemServicoBean.currentOrdemServico.servicosOS}" id="tableServicosOS">  
					<p:column width="10">  
				    	<h:outputText value="#{rowIndex + 1}" />  
					</p:column>  
					
					<p:column headerText="Funcionário">  
				    	<h:outputText value="#{of:abbreviate(servicoOS.funcionario.nome, 70)}"/> 
					</p:column>
									 
					<p:column headerText="Serviço">  
				    	<h:outputText value="#{of:abbreviate(servicoOS.servico.descricao, 60)}"/>  
					</p:column>
					
					<p:column headerText="Quantidade" width="80" style="text-align:center;">
						<h:outputText value="#{servicoOS.quantidade}"/>
					</p:column>
					
					<p:column headerText="Valor unitário" width="100" style="text-align:center;">  
				    	<h:outputText value="#{servicoOS.valor}">
				    		<f:convertNumber pattern="R$ #,###,##0.00" />
				    	</h:outputText> 
					</p:column>
					<p:column headerText="Valor total" width="100" style="text-align:center;">
						<h:outputText value="#{servicoOS.total}">
							<f:convertNumber pattern="R$ #,###,##0.00" />
						</h:outputText>
					</p:column>
					<p:column width="10">  
				    	<p:commandButton icon="ui-icon-trash" actionListener="#{ordemServicoBean.removeItemServicoOS(servicoOS)}" style="height:24px;" immediate="true" 
				    		id="btRemoverItem" disabled="#{(ordemServicoBean.contasReceber.size() > 0)}" title="Remover item"/>
					</p:column>
			  	</p:dataTable>
			</div>
			
			<h:panelGrid columns="4" style="padding:5px;" id="panelTotal">
				<h:outputText value="Total dos serviços"/>
				<h:outputText value="Desconto (%)"/>
				<h:outputText value="Desconto (R$)"/>
				<h:outputText value="Total da ordem de serviço"/>

				<h:outputText id="inputTotalItens" value="#{ordemServicoBean.totalItensNota}">
					<f:convertNumber pattern="R$ #,###,##0.00" />
			    </h:outputText>
			    
				<pe:inputNumber style="width:80px;" value="#{ordemServicoBean.currentOrdemServico.descontoPercentual}" decimalPlaces="2" decimalSeparator="," thousandSeparator="." maxValue="100"
					id="inputDescontoPercentual" disabled="#{(ordemServicoBean.contasReceber.size() > 0) or (ordemServicoBean.currentOrdemServico.descontoValor != null and ordemServicoBean.currentOrdemServico.descontoValor > 0)}">
					<p:ajax event="blur" update="@this inputDescontoValor" listener="#{ordemServicoBean.handleInputDescontoPercentChange}"/>
				</pe:inputNumber>
				
				<pe:inputNumber style="width:80px;" value="#{ordemServicoBean.currentOrdemServico.descontoValor}" decimalPlaces="2" decimalSeparator="," thousandSeparator="." maxValue="100000"
					id="inputDescontoValor" disabled="#{(ordemServicoBean.contasReceber.size() > 0) or (ordemServicoBean.currentOrdemServico.descontoPercentual != null and ordemServicoBean.currentOrdemServico.descontoPercentual > 0)}">
					<p:ajax event="blur" update="@this inputDescontoPercentual" listener="#{ordemServicoBean.handleInputDescontoValorChange}"/>
				</pe:inputNumber>
				
				<h:outputText id="inputTotalNota" value="#{ordemServicoBean.currentOrdemServico.valor}">
					<f:convertNumber pattern="R$ #,###,##0.00" />
			    </h:outputText>
			</h:panelGrid>
			
			<h:panelGrid columns="4" style="padding:5px;" id="panelCondicao">
				<h:outputText value="Condição de pagamento *"/>
				<h:outputText value=""/>
				<h:outputText value=""/>
				<h:outputText value=""/>
								
				<p:autoComplete id="inputCondicao" var="condicao" value="#{ordemServicoBean.currentOrdemServico.condicaoPagamento}"
						itemLabel="#{condicao.condicaoPagamento}" itemValue="#{condicao}" size="50"
						converter="condicaoPagamentoConverter" completeMethod="#{ordemServicoBean.getCondicaoPagamentoByQuery}"
						disabled="#{(ordemServicoBean.contasReceber.size() > 0)}"/>
				<p:commandButton icon="ui-icon-search" style="height:24px;" immediate="true" actionListener="#{ordemServicoBean.openDialogListCondicaoPagamento}"
					disabled="#{(ordemServicoBean.contasReceber.size() > 0)}" title="Selecionar condição de pagamento"/>
				<p:commandButton style="height:24px;" value="Gerar" actionListener="#{ordemServicoBean.gerarContasReceber}"  
					disabled="#{(ordemServicoBean.currentOrdemServico.servicosOS.size() == 0) or (ordemServicoBean.contasReceber.size() > 0)}" id="btGerar" title="Gerar contas a receber" partialSubmit="true"/>
				<p:commandButton style="height:24px;" value="Limpar" id="btLimpar" actionListener="#{ordemServicoBean.cleanListContasReceber}" disabled="#{(ordemServicoBean.currentOrdemServico.servicosOS.size() == 0) or (ordemServicoBean.contasReceber.size() == 0)}" title="Limpar contas a receber"/>
			</h:panelGrid>
			
			<div style="padding-top:10px; margin-left: 10px;">
				<p:dataTable emptyMessage="Não há registros" style="width:500px;"
					var="conta" rowIndexVar="index" id="tableContasReceber" value="#{ordemServicoBean.contasReceber}">						
					<p:column headerText="Parcela" style="width:100px; text-align:center;">  
				    	<h:outputText value="#{index + 1}"/>  
					</p:column>				 
					<p:column headerText="Vencimento" style="width:100px; text-align:center;">  
				    	<h:outputText value="#{conta.dataVencimento}">
							<f:convertDateTime pattern="dd/MM/yyyy"/>
						</h:outputText>  
					</p:column> 
					<p:column headerText="Valor" style="width:100px; text-align:center;">  
				    	<h:outputText value="#{conta.valor}">
			    			<f:convertNumber pattern="R$ #,###,##0.00" />
			    		</h:outputText>   
					</p:column>
			  	</p:dataTable>
			</div>
		</div>
		<h:panelGrid columns="1" style="padding:5px;">
			<h:outputText value="* Campos obrigatórios" />
		</h:panelGrid>
	</p:panel>
		
	</ui:define>
	
	<ui:define name="popups">
		<ui:include src="listCliente.xhtml"/>
		<ui:include src="listFuncionario.xhtml"/>
		<ui:include src="listServico.xhtml"/>
		<ui:include src="formServico.xhtml"/>
		<ui:include src="listCondicaoPagamento.xhtml"/>
		<ui:include src="formCondicaoPagamento.xhtml"/>
		<ui:include src="listFormaPagamento.xhtml"/>
		<ui:include src="formFormaPagamento.xhtml"/>
		<ui:include src="formCliente.xhtml"/>
		<ui:include src="listCidade.xhtml"/>
		<ui:include src="formCidade.xhtml"/>
		<ui:include src="listEstado.xhtml"/>
		<ui:include src="formEstado.xhtml"/>
		<ui:include src="listPais.xhtml"/>
		<ui:include src="formPais.xhtml"/>
		<ui:include src="formFuncionario.xhtml"/>
		<ui:include src="listCargo.xhtml"/>
		<ui:include src="formCargo.xhtml"/>
		<ui:include src="listServicoAddFuncionario.xhtml"/>
		<ui:include src="listFuncionarioAddServico.xhtml"/>
		
		<p:dialog appendToBody="true" modal="true" closable="false" widgetVar="popupConfirmAddItem"
			width="400" resizable="false" header="Confirmação" height="110">
			<h:form>
				<div style="margin-top: 10px;">
					<h:outputText value="Já existe um item com estes serviço e funcionário . Deseja atualizar a quantidade/valor deste item?"/>
				</div>
				<div align="right" style="margin-top: 15px; margin-bottom: 15px;">
					<p:commandButton value="Confirmar" actionListener="#{ordemServicoBean.confirmAddItem}" oncomplete="popupConfirmAddItem.hide()"/>
					<p:commandButton value="Cancelar" onclick="popupConfirmAddItem.hide()"/>
				</div>		
			</h:form>			
		</p:dialog>
	</ui:define>
</ui:composition>